<template>
	<div>
		<h2>Goods商品分类页面</h2>
		<!--面包屑导航-->
		<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 10px;">
			  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
			  <el-breadcrumb-item>商品分类</el-breadcrumb-item>
		</el-breadcrumb>
		<!--主题区域-->
		<el-card>
			<!--添加按钮-->
			<el-button type="primary">添加</el-button>
		</el-card>
		<!--表格树形组件-->
		<tree-Table :data = "goodsList" :columns = "columns" :selection-type ="false"
			 :show-index = "true" index-text="#" 
			  :stripe="true" border :expand-type="true" show-header show-summary >
			<template slot="goodsCoroperate">
				<el-button type="primary">修改</el-button>
				<el-button type="warning">删除</el-button>
			</template>
			<template slot="SexOpe" slot-scope="scope">
				<el-tag v-if="scope.row.sex === 'male'" type="success">男</el-tag>
				<el-tag v-else type="warning">女</el-tag>
			</template>
		</tree-Table>
		<!--分页尾部-->
		<div class="block" style="text-align: center;">
		    <el-pagination
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page="currentPage"
		      :page-sizes="[5, 10, 20, 50]"
		      :page-size="querySize"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="queryInfo.total">
		    </el-pagination>
  		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				queryInfo:{
					querySize:5,
					total:400,
					currentPage:1
				},
				
				goodsList:[{
            name: 'Jack',
            sex: 'male',
            likes: ['football', 'basketball'],
            score: 10,
            children: [
              {
                name: 'Ashley',
                sex: 'female',
                likes: ['football', 'basketball'],
                score: 20,
                children: [
                  {
                    name: 'Ashley',
                    sex: 'female',
                    likes: ['football', 'basketball'],
                    score: 20,
                  },
                  {
                    name: 'Taki',
                    sex: 'male',
                    likes: ['football', 'basketball'],
                    score: 10,
                    children: [
                      {
                        name: 'Ashley',
                        sex: 'female',
                        likes: ['football', 'basketball'],
                        score: 20,
                      },
                      {
                        name: 'Taki',
                        sex: 'male',
                        likes: ['football', 'basketball'],
                        score: 10,
                        children: [
                          {
                            name: 'Ashley',
                            sex: 'female',
                            likes: ['football', 'basketball'],
                            score: 20,
                          },
                          {
                            name: 'Taki',
                            sex: 'male',
                            likes: ['football', 'basketball'],
                            score: 10,
                          },
                        ],
                      },
                    ],
                  },
                ],
              },
              {
                name: 'Taki',
                sex: 'male',
                likes: ['football', 'basketball'],
                score: 10,
              },
            ],
          },
          {
            name: 'Tom',
            sex: 'male',
            likes: ['football', 'basketball'],
            score: 20,
            children: [
              {
                name: 'Ashley',
                sex: 'female',
                likes: ['football', 'basketball'],
                score: 20,
                children: [
                  {
                    name: 'Ashley',
                    sex: 'female',
                    likes: ['football', 'basketball'],
                    score: 20,
                  },
                  {
                    name: 'Taki',
                    sex: 'male',
                    likes: ['football', 'basketball'],
                    score: 10,
                  },
                ],
              },
              {
                name: 'Taki',
                sex: 'male',
                likes: ['football', 'basketball'],
                score: 10,
                children: [
                  {
                    name: 'Ashley',
                    sex: 'female',
                    likes: ['football', 'basketball'],
                    score: 20,
                  },
                  {
                    name: 'Taki',
                    sex: 'male',
                    likes: ['football', 'basketball'],
                    score: 10,
                  },
                ],
              },
            ],
          },
          {
            name: 'Tom',
            sex: 'male',
            likes: ['football', 'basketball'],
            score: 20,
          },
          {
            name: 'Tom',
            sex: 'male',
            likes: ['football', 'basketball'],
            score: 20,
            children: [
              {
                name: 'Ashley',
                sex: 'female',
                likes: ['football', 'basketball'],
                score: 20,
              },
              {
                name: 'Taki',
                sex: 'male',
                likes: ['football', 'basketball'],
                score: 10,
              },
            ],
          }],
				columns:[{label:'名称',prop:'name'},
				{label:'性别',prop:'sex',type:'template',template:'SexOpe'},
				{label:'数量',prop:'score'},
				{label:'爱好',prop:'likes'},
				{label:'操作',type:'template',template:'goodsCoroperate'}]
			}
			
		},
		created(){
			this.getGoodsList();
		},
		methods:{
			//获取商品列表
			async getGoodsList(){
				const {data:res} = await this.$http.get('categories',{params:this.queryInfo});
				//验证数据合法性
				if(res.meta.status !== 200){
					this.$message.error('获取商品列表失败！');
					return this.goodsList; 
				}
			},
			//展示条数发生变化事件
			handleSizeChange(){
				console.log("设置了新条数！");
			},
			//页数变化事件！
			handleCurrentChange(){
				console.log("改变了页数！");
			}
			
		}
		
	}
</script>

<style type="less" scoped>
</style>